<template>
  <div class="app-main">
    <div style="display: flex; align-items: center; gap: 10px; flex-wrap: wrap">
      <el-card style="width: calc(25% - 10px); height: 200px" shadow="hover">
        <el-image
          style="width: 100%; height: 200px"
          src="https://p2.a.kwimgs.com/bs2/upload-ylab-stunt/special-effect/output/HB1_PROD_ai_web_121526812/-7892350569738241779/temp.png"
        />
      </el-card>
      <el-card style="width: calc(25% - 10px); height: 200px" shadow="hover">
        <template #header>
          <h3>待采购订单数（笔）</h3>
        </template>
        <el-statistic :value="268500" style="margin-top: 5%" />
      </el-card>
      <el-card style="width: calc(25% - 10px); height: 200px" shadow="hover">
        <template #header>
          <h3>待中转订单数（笔）</h3>
        </template>
        <el-statistic :value="268500" style="margin-top: 5%"
      /></el-card>
      <el-card style="width: calc(25% - 10px); height: 200px" shadow="hover">
        <template #header>
          <h3>待收货订单数（笔）</h3>
        </template>
        <el-statistic :value="268500" style="margin-top: 5%"
      /></el-card>
    </div>
    <el-card style="width: calc(100% - 10px); margin: 10px 0">
      <template #header>
        <div class="title_box">
          <h2>销售数据统计</h2>
          <el-form :model="form" :inline="true">
            <el-form-item>
              <el-radio-group v-model="form.radio1" prop="radio1" @change="changeTime">
                <el-radio-button label="近7日" :value="1" />
                <el-radio-button label="近30日" :value="0" />
              </el-radio-group>
            </el-form-item>
            <el-form-item label="时间区间">
              <el-date-picker
                v-model="form.value1"
                type="daterange"
                range-separator="-"
                start-placeholder="开始时间"
                end-placeholder="结束时间"
              />
            </el-form-item>
          </el-form>
        </div>
      </template>
      <div class="title_box">
        <div class="statistics" @click="choseStatistics(0)">
          <el-text
            class="mb8"
            :type="!salesIndex ? 'primary' : ''"
            size="large"
          >
            <h3>订单总数（笔）</h3>
          </el-text>
          <el-text
            class="mb8"
            :type="!salesIndex ? 'primary' : ''"
            size="large"
          >
            <h3>400</h3>
          </el-text>
        </div>
        <div class="statistics" @click="choseStatistics(1)">
          <el-text
            class="mb8"
            :type="salesIndex == 1 ? 'primary' : ''"
            size="large"
            ><h3>订单总金额（美元）</h3></el-text
          >
          <el-text
            class="mb8"
            :type="salesIndex == 1 ? 'primary' : ''"
            size="large"
            ><h3>759031.14</h3></el-text
          >
        </div>
        <div class="statistics" @click="choseStatistics(2)">
          <el-text
            class="mb8"
            :type="salesIndex == 2 ? 'primary' : ''"
            size="large"
            ><h3>下单用户数（人）</h3></el-text
          >
          <el-text
            class="mb8"
            :type="salesIndex == 2 ? 'primary' : ''"
            size="large"
            ><h3>400</h3></el-text
          >
        </div>
        <div class="statistics" @click="choseStatistics(3)">
          <el-text
            class="mb8"
            :type="salesIndex == 3 ? 'primary' : ''"
            size="large"
            ><h3>新上架商品数（个）</h3></el-text
          >
          <el-text class="mb8" :type="salesIndex == 3 ? 'primary' : ''"
            ><h3>400</h3></el-text
          >
        </div>
        <div class="statistics" @click="choseStatistics(4)">
          <el-text
            class="mb8"
            :type="salesIndex == 4 ? 'primary' : ''"
            size="large"
            ><h3>客单价（美元）</h3></el-text
          >
          <el-text
            class="mb8"
            :type="salesIndex == 4 ? 'primary' : ''"
            size="large"
            ><h3>400</h3></el-text
          >
        </div>
      </div>
    </el-card>
      <Echarts :option="option" :height="480"></Echarts>
  </div>
</template>

<script setup >
import { ref, onMounted } from "vue";
const { proxy } = getCurrentInstance();
const form = ref({
  radio1: 0,
  value1:[]
});
const salesIndex = ref(0);
const option = ref({});
onMounted(() => {
  getPathList();
  form.value.value1=[getDateBeforeDays(0),getDateBeforeDays(30)]
});
const getPathList = () => {
  option.value = {
    tooltip: {
      trigger: "axis",
    },
    grid: {
      left: "20",
      right: "20", // 或者使用百分比，例如：'2%'
      containLabel: true, // 确保标签不会被裁剪
    },
    xAxis: {
      type: "category",
      boundaryGap: false,
      data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
    },
    yAxis: {
      type: "value",
    },
    series: [
      {
        name: "Email",
        type: "line",
        stack: "Total",
        data: [120, 132, 101, 134, 90, 230, 210],
        markPoint: {
          data: [
            { type: "max", name: "Max" },
            {
              type: "min",
              name: "Min",
              itemStyle: {
                color: "#f56c6c", // 设置最小值标记点的背景颜色为红色
              },
              label: {
                color: "white", // 设置标记点标签的字体颜色为白色
              },
            },
          ],
        },
        markLine: {
          data: [{ type: "average", name: "Avg" }],
        },
      },
    ],
  };
};
const choseStatistics = (index) => {
  salesIndex.value = index;
};
const handleSearch = () => {
  if (indexFrom.value.newTime) {
    indexFrom.value.startTime = proxy.convertTime(
      1,
      indexFrom.value.newTime[0]
    );
    indexFrom.value.endTime = proxy.convertTime(1, indexFrom.value.newTime[1]);
  }
};
const changeTime=(e)=>{
  console.log(e,'[[[[]]]]');
  if(e==1){
    
  }

}
const getDateBeforeDays=(days)=> {
    // 创建一个新的Date对象，代表当前时间
    var today = new Date();
    
    // 使用setDate方法设置为今天的日期减去指定的天数
    today.setDate(today.getDate() - days);
    
    // 获取年、月、日部分
    var year = today.getFullYear();
    var month = String(today.getMonth() + 1).padStart(2, '0'); // 注意月份从0开始
    var day = String(today.getDate()).padStart(2, '0');
    
    // 返回格式化的日期字符串
    return `${year}-${month}-${day}`;
}
</script>

<style scoped lang="scss">
.app-main {
  background: #eef0f3;

}
.title_box {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.statistics {
  // width: 25%;
  display: flex;
  align-items: center;
  cursor: pointer;
  // background: aqua;
}
</style>



